<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About natours</title>
    <link rel="stylesheet" href="./css/icon-font.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 导航 -->
    <div class="navigation">
        <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
        <label for="navi-toggle" class="navigation__button">
          <span class="navigation__icon">&nbsp;</span>
        </label>
        <div class="navigation__background">&nbsp;</div>
        <nav class="navigation__nav">
          <ul class="navigation__list">
            <li class="navigation__item"><a href="#" class="navigation__link"><span>01</span>Natours</a></li>
            <li class="navigation__item"><a href="#" class="navigation__link"><span>02</span>Your benifits</a></li>
            <li class="navigation__item"><a href="#" class="navigation__link"><span>03</span>Popular tourss</a></li>
            <li class="navigation__item"><a href="#" class="navigation__link"><span>04</span>Stories</a></li>
            <li class="navigation__item"><a href="#" class="navigation__link"><span>05</span>Book now</a></li>
          </ul>
        </nav>
      </div>
    <!-- 头部内容 -->
    <header class="header">
        <div class="header__logo-box">
            <img src="./img/logo-white.png" alt="Logo" class="header__logo">
        </div>

        <div class="header__text-box">
            <h1 class="heading-primary">
                <span class="heading-primary--main">Outdoors</span>
                <span class="heading-primary--sub">is where life happens</span>
            </h1>

            <a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
        </div>
    </header>
    <!-- 网页主要内容 -->
    <main>
        <section class="section-about">
            <div class="u-center-text u-margin-bottom-large">
                <h2 class="heading-secondary">
                    Excting tours for adventurous people
                </h2>
            </div>

            <div class="row">
                <div class="col-1-of-2">
                    <h3 class="heading-tertiary u-margin-bottom-small">You're going to fall in love with nature</h3>
                    <p class="paragraph">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur voluptatem consequuntur laboriosam alias expedita veniam impedit! Aliquid inventore iste, perferendis dolorum placeat, fuga beatae saepe incidunt, repellendus minus aperiam architecto!
                    </p>
                    <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
                    <p class="paragraph">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit autem laborum numquam deleniti, libero unde iste magni sunt quaerat error enim. Deserunt atque illum impedit iure quam totam voluptas inventore!
                    </p>

                    <a href="#" class="btn-text">Lear more &rarr;</a>
                </div>
                <div class="col-1-of-2">
                    <div class="compositon">
                        <img src="img/nat-1-large.jpg" alt="Photo 1" class="compositon__photo compositon__photo--p1">
                        <img src="img/nat-2-large.jpg" alt="Photo 2" class="compositon__photo compositon__photo--p2">
                        <img src="img/nat-3-large.jpg" alt="Photo 3" class="compositon__photo compositon__photo--p3">
                    </div>
                </div>
            </div>
        </section>

        <section class="section-features">
            <div class="row">
                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-world"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Explore the world</h3>
                        <p class="feature-box__text">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui dolor aliquid sunt minima, quis eaque
                        </p>
                    </div>
                </div>

                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-compass"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Meet nature</h3>
                        <p class="feature-box__text">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui dolor aliquid sunt minima, quis eaque
                        </p>
                    </div>
                </div>

                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-map"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Find your way</h3>
                        <p class="feature-box__text">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui dolor aliquid sunt minima, quis eaque
                        </p>
                    </div>
                </div>

                <div class="col-1-of-4">
                    <div class="feature-box">
                        <i class="feature-box__icon icon-basic-heart"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">Live a healthier life</h3>
                        <p class="feature-box__text">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui dolor aliquid sunt minima, quis eaque
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-tours" id="section-tours">
            <div class="u-center-text u-margin-bottom-large">
                <h2 class="heading-secondary">
                    Most popular tours
                </h2>
            </div>

            <div class="row">
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--1">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--1">
                                    The sea explorer
                                </span> 
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>3 day tours</li>
                                    <li>Up to 30 people</li>
                                    <li>2 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Diffculty: easy</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-1">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$297</p>
                                </div>
                                <a href="#popup" class="btn btn--white btn--animated">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--2">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--2">
                                    The sea explorer
                                </span> 
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>3 day tours</li>
                                    <li>Up to 30 people</li>
                                    <li>2 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Diffculty: easy</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-2">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$297</p>
                                </div>
                                <a href="#popup" class="btn btn--white btn--animated">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card">
                        <div class="card__side card__side--front">
                            <div class="card__picture card__picture--3">
                                &nbsp;
                            </div>
                            <h4 class="card__heading">
                                <span class="card__heading-span card__heading-span--3">
                                    The sea explorer
                                </span> 
                            </h4>
                            <div class="card__details">
                                <ul>
                                    <li>3 day tours</li>
                                    <li>Up to 30 people</li>
                                    <li>2 tour guides</li>
                                    <li>Sleep in cozy hotels</li>
                                    <li>Diffculty: easy</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card__side card__side--back card__side--back-3">
                            <div class="card__cta">
                                <div class="card__price-box">
                                    <p class="card__price-only">Only</p>
                                    <p class="card__price-value">$297</p>
                                </div>
                                <a href="#popup" class="btn btn--white btn--animated">Book now!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="u-center-text u-margin-top-huge">
                <a href="#" class="btn btn--green btn--animated">Discover all tours</a>
            </div>

        </section>

        <section class="section-stories">
            <div class="bg-video">
                <video class="bg-video__content" autoplay muted loop>
                    <source src="img/video.mp4" type="video/mp4">
                    <source src="img/video.webm" type="video/webm">
                    Your browser is not supported!
                </video>
            </div>

            <div class="u-center-text u-margin-bottom-large">
                <h2 class="heading-secondary">
                    We make people genuinely happy
                </h2>
            </div>

            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="./img/nat-8.jpg" alt="person on a tour" class="story__img">
                        <figcaption class="story__caption">
                            Mary Smith
                        </figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            I had the best week ever with my family
                        </h3>
                        <p>
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae esse placeat, quo modi dolorum voluptas unde dolore, aperiam incidunt blanditiis suscipit sint animi magni, maiores maxime expedita quod exercitationem nemo.
                        </p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="story">
                    <figure class="story__shape">
                        <img src="./img/nat-9.jpg" alt="person on a tour" class="story__img">
                        <figcaption class="story__caption">
                            Jack Wilson
                        </figcaption>
                    </figure>
                    <div class="story__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            WOW! my life is completely different now
                        </h3>
                        <p>
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae esse placeat, quo modi dolorum voluptas unde dolore, aperiam incidunt blanditiis suscipit sint animi magni, maiores maxime expedita quod exercitationem nemo.
                        </p>
                    </div>
                </div>
            </div>

            <div class="u-center-text u-margin-top-huge">
                <a href="#" class="btn-text">Read all stories &rarr;</a>
            </div>
        </section>

        <section class="section-book">
            <div class="row">
                <div class="book">
                    <div class="book__form">
                        <form action="#" class="form">
                            <div class="u-margin-bottom-medium">
                                <h2 class="heading-secondary">
                                    Start booking now
                                </h2>
                            </div>

                            <div class="form__group">
                                <input type="text" class="form__input" placeholder="Full name" id='name' required>
                                <label for="name" class="form__lable">Full name</label>    
                            </div>

                            <div class="form__group">
                                <input type="email" class="form__input" placeholder="Email address" id='email' required>
                                <label for="email" class="form__lable">Email address</label>    
                            </div>

                            <div class="form__group u-margin-bottom-medium">
                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="small" name="size">
                                    <label for="small" class="form__radio-lable">
                                        <span class="form__radio-button"></span>
                                        Small tour group
                                    </label>
                                </div>

                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="large" name="size">
                                    <label for="large" class="form__radio-lable">
                                        <span class="form__radio-button"></span>
                                        Large tour group
                                    </label>
                                </div>
                            </div>

                            <div class="form__group">
                                <button class="btn btn--green">Next step &rarr;</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </section>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer__logo-box">
            <picture class="footer__logo">
                <source srcset="img/logo-green-small-1x.png 1x, img/logo-green-small-2x.png 2x" media="(max-width: 37.5em)">
                <img srcset="img/logo-green-1x.png 1x, img/logo-green-2x.png 2x" alt="Full logo" class="footer__logo">
            </picture>
        </div>
        <div class="row">
            <div class="col-1-of-2">
                <div class="footer__navigation">
                    <ul class="footer__list">
                        <li class="footer__item"><a href="#" class="footer__link">Company</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Contact Us</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Careers</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Privacypolicy</a></li>
                        <li class="footer__item"><a href="#" class="footer__link">Terms</a></li>
                      </ul>
                </div>
            </div>
            <div class="col-1-of-2">
                <p class="footer__copyright">
                    Built by <a href="#" class="footer__link">Jonas Schmedtmann</a> for his online course <a href="#"
                      class="footer__link">Advanced CSS and Sass</a>. Copyright &copy; by Jonas Schmedtmann. You are 100% allowed
                    to use this webpage for both personal and commercial use, but NOT to claim it as your own design. A credit to
                    the original author, Jonas Schmedtmann, is of course highly appreciated.
                  </p>
            </div>
        </div>
    </footer>

    <div class="popup" id="popup">
        <div class="popup__content">
          <div class="popup__left">
            <img src="img/nat-8.jpg" alt="Tour photo" class="popup__img">
            <img src="img/nat-9.jpg" alt="Tour photo" class="popup__img">
          </div>
          <div class="popup__right">
            <a href="#section-tours" class="popup__close">&times;</a>
            <h2 class="heading-secondary u-margin-bottom-small">
              Start booking now
            </h2>
            <h3 class="heading-tertiary u-margin-bottom-small">
              Important &ndash; Please read these terms before booking!
            </h3>
            <div class="popup__text">
              Lorem ipsu dolor sit amet consectetur adipiscing elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernature Lorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernature Lorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernatureLorem ipsu dolor sit amet consectetur adipiscing
              elit.Aperiam, ipsum sapiente aspernature
              adipiscing elit.Aperiam, ipsum sapiente aspernature
            </div>
            <a href="#" class="btn btn--green">Book now</a>
          </div>
        </div>
      </div>

    <!-- <section class="grid-test">
        <div class="row">
            <div class="col-1-of-2">
                Col-1-of-2
            </div>
            <div class="col-1-of-2">
                Col-1-of-2
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3">
                Col-1-of-3
            </div>
            <div class="col-2-of-3">
                Col-2-of-3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-1-of-4">
                Col-1-of-4
            </div>
            <div class="col-2-of-4">
                Col-2-of-4
            </div>
        </div>
    </section> -->
</body>
</html>